<template>
    <div>
        <p>房间名：{{room_name}}
            <van-button type="primary" size="small" @click="()=>{this.show_chang_room= !this.show_chang_room}">更换或创建房间</van-button>
            <van-field v-if="show_chang_room" @keydown="set_room" style="display: inline-block;width: 200px;height:30px;" :autofocus="true" placeholder="请输入房间名" />
        </p>
        <p>用户名：{{user_name}}
            <van-button type="primary" size="small" @click="()=>{this.show_chang_user= !this.show_chang_user}">更改用户名</van-button>
            <van-field v-if="show_chang_user" @keydown="set_user" style="display: inline-block;width: 200px;height:30px;" :autofocus="true" placeholder="请输入用户名" />
        </p>
        <p>
            其他用户：
            <span v-for="(v,i) in current_users" :key="i" style="font-weight: bold;padding-right: 5px;">{{v}}</span>
        </p>
    </div>
</template>

<script>
    import { Button, Field, Notify } from 'vant';
    export default {
        name: "SocketRoom",
        components: {
            [Button.name]: Button,
            [Field.name]: Field,
        },
        props: {
            socket: {
                type: Object,
                default: ()=>null
            }
        },
        data(){
            return {
                user_name: null,
                room_name: null,
                current_users: [],
                show_chang_user: false,
                show_chang_room: false,
            }
        },
        watch:{
            socket: function(new_socket){
                if(new_socket){
                    new_socket.on('nameResult', (msg)=>{
                        if(msg.success){
                            this.$data.show_chang_user && Notify({ type: 'success', message: msg.message });
                            this.$data.user_name=msg.name;
                        }
                        else{
                            this.$data.show_chang_user && Notify({ type: 'danger', message: msg.message });
                        }
                    });
                    new_socket.on('joinResult', (msg)=>{
                        this.$data.room_name=msg.room;
                    });
                    new_socket.on('currentUsers', (msg)=>{
                        this.$data.current_users=msg;
                    });
                    new_socket.on('currentUsersMinus', (msg)=>{
                        this.$data.current_users.splice(this.$data.current_users.indexOf(msg),1);
                    });
                    new_socket.on('currentUsersAdd', (msg)=>{
                        this.$data.current_users.push(msg);
                    });
                }
            }
        },
        methods: {
            set_user(e){
                if(e.key === "Enter" && this.$props.socket){
                    this.$props.socket.emit('nameAttempt', e.target.value);
                    e.target.value= '';
                }
            },
            set_room(e){
                if(e.key === "Enter" && this.$props.socket){
                    this.$props.socket.emit('join', {newRoom: e.target.value});
                    e.target.value= '';
                }
            },
        }
    }
</script>

<style scoped>

</style>
